<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        名字:<input type="text" class="username" />
        手机:<input type="text" class="phone" />
        邮箱:<input type="text" class="email"/>
        <input type="submit" value="提交" class="sub" />
    </form>
    <script>
        // 1.用正则验证一个数是否在0-666之间

        /* 
            1位 0-9          0-9
            2位 [1-9][0-9]    10-99
            3位 [1-5][0-9][0-9] 100-599
            3位 6[0-5][0-9]    600- 659
            3位 66[0-6]  660-666
         */
        //  var reg = /(^[0-9]$)|(^[1-9][0-9]$)|(^[1-5][0-9][0-9]$)|(^6[0-5][0-9]$)|(^66[0-6]$)/;
        //  console.log(reg.test("66"));
        var arr = [
            {
                name:"用户名校验",
                reg:/^[\u4e00-\u9fa5]{2,4}$/,
                isPass:false
            },
            {
                name:"手机校验",
                reg:/^1[3-9]\d{9}$/,
                isPass:false
            },
            {
                name:"邮箱校验",
                reg:/^\w+@[a-zA-Z0-9]{2,4}(\.[a-zA-Z]{2,}){1,2}$/,
                isPass:false
            }
        ]

        var usernameEle = document.querySelector(".username");
        var phoneEle = document.querySelector(".phone");
        var emailEle = document.querySelector(".email");
        var subEle = document.querySelector(".sub");
        usernameEle.onblur = function(){
            var val = this.value;
            if( arr[0].reg.test(val)){
                arr[0].isPass = true;
            }else{
                arr[0].isPass = false;
            }
            console.log(arr);
        }


        phoneEle.onblur = function(){
            var val = this.value;
            if( arr[1].reg.test(val)){
                arr[1].isPass = true;
            }else{
                arr[1].isPass = false;
            }
            console.log(arr);
        }


        emailEle.onblur = function(){
            var val = this.value;
            if( arr[2].reg.test(val)){
                arr[2].isPass = true;
            }else{
                arr[2].isPass = false;
            }
            console.log(arr);
        }


        subEle.onclick = function(e){
            // 阻止默认事件
            e.preventDefault();
            var res = arr.every(function(item){
                return item.isPass;
            })

            if(res){
                console.log("可以提交");
            }else{
                console.log("不能提交");
            }
        }






    </script>
</body>
</html>